// /**
////  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
// *
// * @category design
// * @copyright Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
// * @license http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
// */

//  # Breadcrumbs
//  Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their location within programs, websites or documents.
//
//  Breadcrumbs layout with links can be separated by any symbol, for example <code>></code> symbol.
//
//  The following markup corresponds to the accesibility demands:
//  ```html
//  <div class="example-breadcrumbs-1">
//      <span class="label" id="breadcrumb-label">You are here:</span>
//      <ul class="items" aria-labelledby="breadcrumb-label">
//          <li class="item home">
//              <a title="Go to Home Page" href="#">Home</a>
//          </li>
//          <li class="item category1">
//              <a title="Category" href="#">Category</a>
//          </li>
//          <li class="item category2">
//              <a title="Category" href="#">Subcategory</a>
//          </li>
//          <li class="item category3">
//              <strong>Products</strong>
//          </li>
//      </ul>
//  </div>
//  ```

.example-breadcrumbs-1 {
    .mixin-breadcrumbs();
}

//  # Breadcrumbs variables
//
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-font-size</th>
//        <td class="vars_value">@font-size-s</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs font size</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-separator-symbol</th>
//        <td class="vars_value">'&gt;'</td>
//        <td class="vars_value">'' | any symbol</td>
//        <td>separating symbol between breadcrumbs</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-separator-color</th>
//        <td class="vars_value" nowrap="nowrap">@breadcrumbs-current-color</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>separating symbol color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-display</th>
//        <td class="vars_value">'' | inline | block | inline-block</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs links display property</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-padding</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs items padding</td>
//      </tr>
//      <tr>
//        <th colspan="4" class="vars_section">Breadcrumbs - current page</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-color</th>
//        <td class="vars_value">#a3a3a3</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs current page color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-font-weight</th>
//        <td class="vars_value">@font-weight-base</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs current page font weight</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-background</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs current page background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-border</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs current page border</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-gradient</th>
//        <td class="vars_value">false</td>
//        <td class="vars_value">true | false</td>
//        <td>breadcrumbs current page have gradient background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-gradient-direction</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">'' | vertical | horizontal</td>
//        <td>direction of breadcrumbs current page background gradient (if there is any)</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-gradient-start-color</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs current page gradient start color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-gradient-end-color</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs current page gradient end color</td>
//      </tr>
//      <tr>
//        <th colspan="4" class="vars_section">Breadcrumbs link</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient</th>
//        <td class="vars_value">false</td>
//        <td class="vars_value">true | false</td>
//        <td>breadcrumbs item have gradient background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-direction</th>
//        <td class="vars_value">'' | vertical | horizontal</td>
//        <td class="vars_value">'' | vertical | horizontal</td>
//        <td>direction of breadcrumbs item background gradient (if there is any)</td>
//      </tr>
//      <tr>
//        <th colspan="4" class="vars_section">Breadcrumbs link - default</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-color</th>
//        <td class="vars_value">@color-primary</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-background</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item border</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-border</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item text decoration</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-text-decoration</th>
//        <td class="vars_value">none</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-start-color</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item gradient start color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-end-color</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item gradient end color</td>
//      </tr>
//      <tr>
//        <th colspan="4" class="vars_section">Breadcrumbs link - visited</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-color-visited</th>
//        <td class="vars_value">@color-primary</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item visited color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-background-visited</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item visited border</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-border-visited</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item visited background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-text-decoration-visited</th>
//        <td class="vars_value">none</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item text decoration</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-start-color-visited</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item visited gradient start color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-end-color-visited</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item visited gradient end color</td>
//      </tr>
//      <tr>
//        <th colspan="4" class="vars_section">Breadcrumbs link - hover</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-color-hover</th>
//        <td class="vars_value">@color-primary</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item hover color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-background-hover</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item hover border</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-border-hover</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item hover text decoration</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-text-decoration-hover</th>
//        <td class="vars_value">underline</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item hover background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-start-color-hover</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item hover gradient start color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-end-color-hover</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item hover gradient end color</td>
//      </tr>
//      <tr>
//        <th colspan="4" class="vars_section">Breadcrumbs link - active</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-color-active</th>
//        <td class="vars_value">@color-primary</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item active color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-background-active</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item active border</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-border-active</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item active text decoration</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-text-decoration-active</th>
//        <td class="vars_value">none</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item active background</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_breadcrumbs-link-gradient-start-color-active</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item active gradient start color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-end-color-active</th>
//        <td class="vars_value">''</td>
//        <td class="vars_value">&nbsp;</td>
//        <td>breadcrumbs item active gradient end color</td>
//      </tr>
//    </table>
//  </pre>
//
//  # Button-styled breadcrumbs with gradient background, border, and no separating symbol
//
//  Set values for the following variables to:
//
//  hide separating symbol:
//  ```css
//  @_breadcrumbs-separator-symbol: ''
//  ```
//  set up links gradient background for default and hover state:
//  ```css
//  @_breadcrumbs-link-gradient: true,
//  @_breadcrumbs-link-gradient-direction: vertical,
//  @_breadcrumbs-link-gradient-start-color: #f4f4f4,
//  @_breadcrumbs-link-gradient-end-color: #ccc,
//  @_breadcrumbs-link-gradient-start-color-hover: #ccc,
//  @_breadcrumbs-link-gradient-end-color-hover: #f4f4f4
//  ```
//  set up current page gradient background:
//  ```css
//  @_breadcrumbs-current-gradient: true,
//  @_breadcrumbs-current-gradient-start-color: #f7b32e,
//  @_breadcrumbs-current-gradient-end-color: #ff5501
//  ```
//  ```html
//  <div class="example-breadcrumbs-2">
//      <ul class="items">
//          <li class="item home">
//              <a title="Go to Home Page" href="#">Home</a>
//          </li>
//          <li class="item category1">
//              <a title="Category" href="#">Category</a>
//          </li>
//          <li class="item category2">
//              <a title="Category" href="#">Subcategory</a>
//          </li>
//          <li class="item category3">
//              <strong>Products</strong>
//          </li>
//      </ul>
//  </div>
//  ```

.example-breadcrumbs-2 {
    .mixin-breadcrumbs(
        @_breadcrumbs-separator-symbol: '',
        @_breadcrumbs-display: inline-block,
        @_breadcrumbs-padding: 3px 5px,
        @_breadcrumbs-link-border: 1px solid #ccc,
        @_breadcrumbs-link-gradient: true,
        @_breadcrumbs-link-gradient-direction: vertical,
        @_breadcrumbs-link-gradient-start-color: #f4f4f4,
        @_breadcrumbs-link-gradient-end-color: #ccc,
        @_breadcrumbs-link-gradient-start-color-hover: #ccc,
        @_breadcrumbs-link-gradient-end-color-hover: #f4f4f4,
        @_breadcrumbs-link-text-decoration-hover: none,
        @_breadcrumbs-current-color: #1979c3,
        @_breadcrumbs-current-gradient: true,
        @_breadcrumbs-current-gradient-start-color: #f7b32e,
        @_breadcrumbs-current-gradient-end-color: #ff5501,
        @_breadcrumbs-current-border: 1px solid #d04b0a
    );
}

//  # Breadcrumbs with solid background
//
//  Breadcrumbs with solid background and a triangle right on the right side, without separating symbol.
//
//  Set values for the following variables to:
//
//  hide separating symbol use:
//  ```css
//  @_breadcrumbs-separator-symbol: ''
//  ```
//  set up solid background for links for default and hover state:
//  ```css
//  @_breadcrumbs-link-background: #f4f4f4,
//  @_breadcrumbs-link-background-hover: #ccc
//  ```
//  set up gradient background for current page:
//  ```css
//  @_breadcrumbs-current-background: #e7e7e7,
//  @_breadcrumbs-current-color: #333,
//  ```
//
//  User can also add customization that was not provided with the breadcrumbs mixin. Here we can add solid arrow right for each link:
//  ```html
//  <div class="example-breadcrumbs-3">
//      <ul class="items">
//          <li class="item home">
//              <a title="Go to Home Page" href="#">Home</a>
//          </li>
//          <li class="item category1">
//              <a title="Category" href="#">Category</a>
//          </li>
//          <li class="item category2">
//              <a title="Category" href="#">Subcategory</a>
//          </li>
//          <li class="item category3">
//              <strong>Products</strong>
//          </li>
//      </ul>
//  </div>
//  ```

.example-breadcrumbs-3 {
    .mixin-breadcrumbs(
        @_breadcrumbs-separator-symbol: '',
        @_breadcrumbs-display: inline-block,
        @_breadcrumbs-padding: 3px 5px,
        @_breadcrumbs-current-background: #e7e7e7,
        @_breadcrumbs-current-color: #333,
        @_breadcrumbs-link-text-decoration-hover: none,
        @_breadcrumbs-link-background: #f4f4f4,
        @_breadcrumbs-link-background-hover: #ccc
    );
    .item a {
        position: relative;
        margin: 0 11px 0 0;
        &:after {
            .arrow(right, 12px, #f4f4f4);
            content: "";
            position: absolute;
            display: block;
            top: 0;
            right: -23px;
        }
        &:hover:after {
            border-color: transparent transparent transparent #ccc;
        }
    }
}
